import React, { useEffect, useState } from 'react'
import { Form, Button, Modal, Select, Steps, Row, Col } from 'antd'
import { connect } from 'umi'
import { contractTypeStatusList } from '@/utils/constant'
import moment from 'moment'
import CreateForm from './CreateForm'
import ReturnForm from './ReturnForm'
import NewStaff from './NewStaff'
import { getParameterList } from '../service'

const FormItem = Form.Item;
const { Step } = Steps;
const { Option } = Select;
const formLayout = {
  labelCol: { span: 7 },
};

const StepsForm = (props) => {
  const { visible, record, onSubmit, onCancel, global = {}, statusType, loading } = props;
  const { options = {} } = global
  const { nativePlace = [] } = options
  const [form] = Form.useForm()
  const [currentStep, setCurrentStep] = useState(0)
  const [title, setTitle] = useState('合同签署')
  const [jobType, setJobType] = useState([])

  useEffect(() => {
    if (visible) {
      setCurrentStep(0)
      setTitle('合同签署')
      getParameterList('jobType').then(res => {
        setJobType(res)
      })
    }
  }, [visible])

  const onFormCancel = () => {
    form.resetFields();
    onCancel();
    setCurrentStep(0);
    setTitle('合同签署');
  };

  const renderFooter = () => {
    return (
      <>
        {(currentStep !== 0) && <Button style={{ float: 'left' }} onClick={backward}>上一步</Button>}
        <Button onClick={() => onFormCancel()}>取消</Button>
        {(currentStep !== 1) && <Button type="primary" onClick={() => handleNext()}>下一步</Button>}
        {(currentStep === 1) && <Button type="primary" loading={loading} onClick={() => handleNext()}>完成</Button>}
      </>
    )
  };

  const backward = () => setCurrentStep(currentStep - 1);

  const handleNext = async () => {
    const fieldsValue = await form.validateFields()
    if (currentStep === 1) {
      let values = {
        ...fieldsValue,
        oid: record.oid,
        id: record.id,
        type: record.type,
        contractStartTime: moment(fieldsValue.contractTempDate[0]).format('YYYY-MM-DD'),
        contractEndTime: moment(fieldsValue.contractTempDate[1]).format('YYYY-MM-DD'),
        work: fieldsValue.work,
        contract: fieldsValue.contract,
        serverId: fieldsValue.data && fieldsValue.data[0].serverId,
        serverName: fieldsValue.data && fieldsValue.data[0].serverName,
      };
      form.resetFields();
      onSubmit(values)
    } else {
      let type = fieldsValue.contractType;
      record.contractType = type;
      if (type === 1) {
        setTitle('签订劳动合同')
      } else if (type === 3) {
        setTitle('签订离退休返聘协议')
      } else if (type === 2) {
        setTitle('签订实习协议')
      }
      setCurrentStep(currentStep + 1)
    }
  };

  const getDisabled = (jobType, value) => {
    if(typeof(jobType) !== "undefined") {
      //新签
      return (jobType === '0' || jobType === '4')
        ? value !== 1
        : (jobType === '5' || jobType === '3-6')
          ? value !== 2
          : (jobType === '3')
            ? value !== 3
            : false
    } else {
      //续签

    }

  };

  const renderContent = () => {
    if (currentStep === 0) {
      return (
        <>
          <Row gutter={24} justify='center'>
            <Col span={8}>
              <Form.Item label="合同类型:" extra={'请先选择合同类型，再进行下一步！'}>
                <FormItem name="contractType" noStyle rules={[{ required: true, message: '请先选择合同类型！' }]}>
                  <Select placeholder="请先选择合同类型">
                    {contractTypeStatusList.map((item, index) => {
                      if (record) {
                        return (
                          <Option value={item.value}
                                  disabled={getDisabled(record.jobType,item.value)}
                                  key={index}>
                            {item.label}
                          </Option>
                        )
                      }
                    })}
                  </Select>
                </FormItem>
              </Form.Item>
            </Col>
          </Row>
        </>
      )
    } else if (currentStep === 1) {
      const fieldsValue = form.getFieldsValue()
      if (fieldsValue.contractType === 1) {
        return <CreateForm record={record} form={form} jobType={jobType} statusType={statusType}
                           nativePlace={nativePlace}/>
      } else if (fieldsValue.contractType === 3) {
        return <ReturnForm record={record} form={form} jobType={jobType} statusType={statusType}
                           nativePlace={nativePlace}/>
      } else if (fieldsValue.contractType === 2) {
        return <NewStaff record={record} form={form} statusType={statusType}/>
      }
    }
  };

  return (
    <Modal
      width='70%'
      destroyOnClose
      title={title}
      visible={visible}
      footer={renderFooter()}
      onCancel={() => onFormCancel()}
    >
      <Steps style={{ marginBottom: 28, padding: '0 290px' }} current={currentStep}>
        <Step title="合同类型"/>
        <Step title="合同签署"/>
      </Steps>
      <Form form={form} {...formLayout} style={{ paddingTop: '24px' }}>
        {renderContent()}
      </Form>
    </Modal>
  )
};

export default connect(({ user, recruitment, global }) => ({
  recruitment,
  currentUser: user.currentUser,
  global
}))(StepsForm)
